<template>
  <div class="songDetail">
    <div class="songHeader">
      <div>歌曲列表</div>
      <div>
        <input type="text" placeholder="搜索歌单音乐" v-model="searchValue" />
        <span class="iconfont iconsousuo" v-if="!searchValue"></span>
        <span class="iconfont iconcuowu" v-if="searchValue"></span>
      </div>
      <div class="move"></div>
    </div>
    <div class="songInfo">
      <div class="songItem">
        <div></div>
        <div>音乐标题</div>
        <div>歌手</div>
        <div>专辑</div>
        <div>时长</div>
      </div>
      <div
        v-for="(item, index) in songDetail"
        :key="item.id"
        class="songItem"
        @dblclick="startPlaySong(item, store)"
        :style="{ backgroundColor: index % 2 ? '#252525' : '#292929' }"
      >
        <div style="text-align: center">{{ currentIndex(index + 1) }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.singer }}</div>
        <div>{{ item.album }}</div>
        <div>{{ formatTime(item.duration) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import startPlaySong from "@/songPlay.minxin.js";
import { useUserStore } from "@/store";
const store = useUserStore();

import axios from "@/http";
onMounted(() => {
  getSongAllList();
});
const searchValue = ref<string>("");
const route = useRoute();
const songDetail = ref([]);
const formatTime = computed(() => {
  return (time) => {
    const S = Math.floor(time / 1000);
    const m = Math.floor(S / 60);
    const s = S % 60;
    return `${m}:${s < 10 ? "0" + s : s}`;
  };
});
const currentIndex = computed(() => (index) => (index < 10 ? "0" + index : index));

const getSongAllList = () => {
  axios
    .get("/album", {
      params: {
        id: route.params.id,
      },
    })
    .then((res) => {
      console.log(res.data.songs);
      res.data.code === 200 &&
        (songDetail.value = res.data.songs.map((item) => {
          return {
            ...item,
            singer: item.ar[0].name,
            album: item.al.name,
            duration: item.dt,
            picUrl: item.al.picUrl,
          };
        }));
    });
};
</script>

<style scoped lang="scss">
.songDetail {
  color: #fff;
  margin: 0 36px;
  padding-bottom: 60px;
  .songInfo {
    .songItem {
      display: flex;
      padding: 8px 0;
      &:hover {
        background-color: #313131 !important;
      }
      div {
        padding: 1px;
        font-size: 13px;
        color: #878787;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          cursor: default;
        }
        &:nth-child(1) {
          flex-basis: 60px;
        }
        &:nth-child(2) {
          flex-basis: 260px;
          color: #b2b2b2;
        }
        &:nth-child(3) {
          flex-basis: 200px;
        }
        &:nth-child(4) {
          flex-basis: 260px;
        }
      }
    }
  }

  .songHeader {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #303030;
    height: 30px;
    .move {
      position: absolute;
      bottom: 0;
      width: 64px;
      height: 3px;
      background-color: #a9342d;
    }
    div:nth-child(1) {
      color: #a9342d;
      color: 14px;
    }
    div:nth-child(2) {
      position: relative;
      input {
        background-color: #252525;
        border: none;
        padding: 2px 2px 2px 26px;
        height: 24px;
        border-radius: 24px;
        color: #9fa3a8;
        outline: none;
      }
      .iconfont {
        font-size: 13px;
        position: absolute;
        line-height: 27px;
        color: #b2b2b2;
        left: 9px;
      }
    }
  }
}
</style>
